
import React from 'react';
import { _ } from '../../util/pcPublic';

export default class WfNativeCheckbox extends React.Component {

    render() {
        const { options = [], fieldAttr = {}, value, viewAttr, domKey } = this.props;
        const { selectattr } = fieldAttr;
        const { fieldshowtypes } = selectattr;//横向是1 竖向是2
        let keys = value.split(",");
        let checkboxs = [];
        let isRequired = viewAttr == 3 && value == "";
        options.map(item => {
            if (item.value !== "") {
                checkboxs.push(
                    <span className="wf-checkbox-item"
                        style={{
                            display: fieldshowtypes == 2 ? "block" : "inline-block",
                        }}
                        id={item.value}
                        onClick={(e) => this.onClick(e)}
                    >
                        <input type="checkbox" className="wf-checkbox" id={item.value} value={item.value} checked={keys.includes(item.value)} disabled={viewAttr == 1} />
                        <label id={item.value} className="wf-checkbox-label" >{item.label}</label>
                    </span>
                );
            }
        })
        return (
            <div className='wf-nativecheckbox'>
                <div className='wf-nativecheckbox-checkboxGroup'>
                    {checkboxs}
                </div>
                {isRequired && <div className="wf-checkbox-required-icon">
                    <img src="/images/BacoError_wev9.png" align="absmiddle" />
                </div>
                }
            </div>
        )
    }

    onClick = (e) => {
        const { onChange, viewAttr ,value, options} = this.props;
        let keys = value.split(",");
        if (viewAttr == 1) return;
        let v = e.target.id;
        if (keys.includes(v)) {
            keys = keys.filter(item => item != v);
        } else {
            keys.push(v)
        }
        let datas = [];
        keys.map(item => {
            options.map(op => {
                if (op.value == item) {
                    datas.push({ key: item, label: op.label });
                }
            })
        })
        onChange(datas);
    }
}